
import React from "react";
import {Link} from 'react-router';
import Relay from "react-relay";
import {_Input,_Button,_Icon,_Modal} from 'ANT_DE';
const Input = _Input,
    Button = _Button,
    Icon = _Icon, Modal = _Modal;

import {Spin,Alert} from 'antd';
import GetProDigestMutation from '../mutation/ProductionDigestImageMutation/GetProDigestMutation'  //获取上次保存的接口读取
import {ViewImgList} from '../components/PackStep_Header'

import '../css/productionDigestImage.css'

import Config from "../../../../util/Config"

export default class A extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fileList:[],
            isLoading:true,
            previewImg:{curImgSrc:"",curImgName:""},   //当前图片预览链接
            isPreview:false,

        };
        this.FixedImgSrc = Config.qiuniu;
        this.pdId = this.props.pdId;

        this.cancelPreview = this.cancelPreview.bind(this);
    }

    componentWillMount(){

    }

    //asd
    componentDidMount(){
        // 获得上次保存的数据as
        Relay.Store.commitUpdate(new GetProDigestMutation({
                pdId:this.pdId
            }),{
                onSuccess:(res)=>{
                    let data = res.getProDigest.responseData;
                    if(data.errorCode == 0){
                        let con_img = data.proDigestModel.imgJSON,
                            arr = [];

                        // 非空操作
                        (!con_img) ? arr = [] : arr = JSON.parse(con_img);

                        this.setState({
                            fileList:arr,
                            isLoading:false
                        })
                    }
                },
                onFailure:()=>{
                    message.error("拉取数据失败，请检查网络连接")
                }
            }
        );
    }

    handlePreview(index){
        this.setState({
            isPreview:true,
            previewImg: {
                curImgSrc: this.FixedImgSrc + this.state.fileList[index].file.response.key,
                curImgName: this.state.fileList[index].file.name
            }
        })
    }

    //sdas

    cancelPreview(){
        this.setState({
            isPreview:false,
            curImgSrc:""
        })
    }

    render(){
        const {isLoading,fileList,previewImg,isPreview} = this.state;
        return(
            <div className="productionDigestImage_look">
                <Spin
                    tip="加载中"
                    spinning={isLoading}
                    wrapperClassName="productionDigestImage_look_loading"
                >
                    <div className="production_look_pic">
                        {
                            fileList.length !==0 &&  fileList.map((item,index)=>
                                <ViewImgList
                                    key={item.file.uid}
                                    imgSrc={`${this.FixedImgSrc + item.file.response.key}`}
                                    imgName={item.file.name}
                                    handlePreview={(e)=>this.handlePreview(index)}
                                    textValue={item.text}
                                />
                            )
                        }
                    </div>

                    <Modal
                        className="production_preview"
                        width={800}
                        visible={isPreview}
                        footer={null}
                        onCancel={this.cancelPreview}
                    >
                        <img src={previewImg.curImgSrc} style={{ width: '100%' }} alt={previewImg.curImgName}/>
                    </Modal>

                </Spin>
                {
                     fileList.length === 0 &&
                         <p className="production_look_empty">
                             <i>  </i>
                             <span>暂无数据</span>
                         </p>
                }
            </div>
        )

    }
}